<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <style>
        .bag {
            font-size: 40px;
        }

        .color {
            color: pink;
        }

        .em {
            font-style: italic;
        }
    </style>
</head>

<body>

    <!-- <h1 v-bind:class="['color','bag',{'em': flag}]">你好vue</h1> -->
    <!-- <h1 v-bind:class="['color']">你好,vue</h1> -->
    <!-- <h1 v-bind:class="{color: true,em: true, bag: false}">你好vue</h1> -->
    <div class="box">
        <h1 :class="classObj">你好, vue</h1>
        <h2 :style="[styleObj, styleObj2]">style属性</h2>
    </div>


    <script>
        var ve = new Vue({
            el: ".box",
            data: {
                flag: false,
                classObj: {
                    color: true,
                    em: true,
                    bag: false
                },
                styleObj: {
                    color: "red",
                    "font-size": 70+"px",
                },
                styleObj2: {
                    "font-style": "italic",
                }
            },
            methods: {

            }
        })
    </script>

</body>

</html>